<template>
    <div>
        <h2>店铺</h2>
        <el-row type="flex">
          <el-col :span="6" tag="div">
            <dl>
              <dt class="el-icon-user-solid"></dt>
              <dd>新增用户量<span class="num">237</span></dd>
              <dd><el-progress :show-text="false" :percentage="30" color="#864DD9"></el-progress></dd>
            </dl>
          </el-col>
          <el-col class="sec" :span="6" tag="div">
            <dl>
              <dt class="el-icon-s-order"></dt>
              <dd>新增订单数量<span class="num">9888</span></dd>
              <dd><el-progress :show-text="false" :percentage="45" color="#CF53F9"></el-progress></dd>
            </dl>
          </el-col>
          <el-col class="third" :span="6" tag="div">
            <dl>
              <dt class="el-icon-s-order"></dt>
              <dd>新增订单数量<span class="num">9888</span></dd>
              <dd><el-progress :show-text="false" :percentage="85" color="#e95f71"></el-progress></dd>
            </dl>
          </el-col>
          <el-col class="four" :span="6" tag="div">
            <dl>
              <dt class="el-icon-s-order"></dt>
              <dd>新增订单数量<span class="num" style="color:#7127AC;">9888</span></dd>
              <dd><el-progress :show-text="false" :percentage="56" color="#7127AC"></el-progress></dd>
            </dl>
          </el-col>
        </el-row>
        <el-row>
          <div class="search">
            <p class="intext">
              <el-input
                style="width:400px;"
                size="mini"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="query">
              </el-input>
            </p>
            <button></button>
          </div>
        </el-row>
        <el-row>
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="userName"
                label="用户名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="nickName"
                label="昵称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="updatedAt"
                label="更新日期">
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small">查看</el-button>
                  <el-button @click="dialogFormVisible = true" type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
        </el-row>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="btn" @click="dialogFormVisible = false">取 消</el-button>
            <el-button class="btn" type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>

    </div>
</template>

<script>
import * as api from '@/api/getUsersInfo'
import moment from 'moment'
export default {
    name:'Shops',
     data() {
      return {
        tableData:[],
        form:{
          username:'',
          region:'',
          
        },
        dialogFormVisible:false,
        dialogTableVisible: false,
        formLabelWidth: '120px',
        query:'',
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
     
    },
    mounted(){
      api.getUsersInfo().then(data=>{
        console.log(data.data.users)
        this.tableData = data.data.users
      })
    }
}
</script>

<style scoped>
  .intext{
    position: relative;
    /* border:1px solid red; */
  }
 
  *{
      padding:0;margin:0;
    }
  .el-row{
    justify-content: space-between;
    margin-bottom:20px;
  }
  .el-col{
    min-height:60px;
    overflow: hidden;
    background:#2d3035;
    /* border:1px solid red; */
    width:23%;
    border-radius:2px;

  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-col dl{
    width:100%;
    box-sizing: border-box;
    text-align: left;
    font-size:12px;
    text-indent: 0;
    padding:10px 20px;
    line-height:32px;
    position: relative;
  }
  .el-col dl dt{
    text-align:left;
    font-size:20px;
  }
  .num{
    font-size:28px;
    color:#864DD9;
    position: absolute;
    right:20px;
    top:34px;
    font-family: "微软雅黑";
  }
  .sec .num{
    color:#CF53F9;
  }
  .third .num{
    color:#e95f71;
  }
  .btn{
    padding:5px;
  }
  .search{
    background:#aaa;
    min-height:60px;
  }
  .search h2{
    color:#fff;
  }
</style>


